<template>
	
	<view>
		
		<view class="flex align-center bg-white">
			<view>
				<image src="/static/logo.svg" class="logo"></image>
			</view>
			<view class="flex padding-xs basis-xl radius  align-center margin-lg solids">
				<view><input /></view>
				<view class="cuIcon-search"></view>
			</view>

			<view>
				<image src="../../static/user.svg" class="cu-avatar round margin-sm"></image>
			</view>
		</view>

		<view>
			<swiper class="screen-swiper margin-sm" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item class="r" v-for="(item,index) in items" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="grid-list flex">
				<view class="grid-item" v-for="(item,index) in griditems" :key="index">
					<image :src="item.image"></image>
					<text>{{item.name}}</text>

				</view>

			</view>
			<myHelp></myHelp>
			<myHotApplication></myHotApplication>

		</view>
		
		
		<cloudHost />
	</view>
</template>

<script>
import cloudHost from '../../components/cloud-host-components/cloud-host/cloud-host.vue'
	import help from '../../components/help/help.vue'
import HotApplication from '../../components/HotApplication/HotApplication.vue'
	export default {
		data() {
			return {
				items: [
					"/static/resources/swiper-items/1.png",
					"/static/resources/swiper-items/2.jpg",
					"/static/resources/swiper-items/3.png",
				],

				cloudHostItemList:[
					{
						index:1,
						url:"/static/resources/popular-product/1-TanXingYunZhuJi.svg",
						name:"弹性云主机"
					},
					{
						index:2,
						url:"/static/resources/popular-product/2-MySQL.svg",
						name:"关系型数据库MySQL版"
					},
					{
						index:3,
						url:"/static/resources/popular-product/3-Postgresql.svg",
						name:"关系型数据库PostgreSQL版"
					},
					{
						index:4,
						url:"/static/resources/popular-product/4-DuiXiangCunChu.svg",
						name:"对象存储"
					},
					{
						index:5,
						url:"/static/resources/popular-product/5-XiaZaiJiaSu.svg",
						name:"下载加速"
					},
					{
						index:6,
						url:"/static/resources/popular-product/6-JingTaiJiaSu.svg",
						name:"静态加速"
					},
					{
						index:7,
						url:"/static/resources/popular-product/7-ShiPinZhiBo.svg",
						name:"视频直播"
					},
					{
						index:8,
						url:"/static/resources/popular-product/8-WangYeFangCuanGaI.svg",
						name:"网页防篡改"
					}],
				griditems: [{
						id: "1",
						name: '最新活动',
						image: "/static/resources/grid/1.png"
					},
					{
						id: "2",
						name: '新客特惠',
						image: "/static/resources/grid/2.png"
					},
					{
						id: "3",
						name: '云上钜惠',
						image: "/static/resources/grid/3.png"
					},
					{
						id: "4",
						name: '价格计算器',
						image: "/static/resources/grid/4.png"

					}
				]

			}
		},

		components:{
			cloudHost:cloudHost,
			myHelp: help,
			myHotApplication: HotApplication,

		},

		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.logo {
		width: 200rpx;
		height: 175rpx;
	}

	.grid-list {
		background-color: #f7f7f7;
	}

	.grid-item {
		width: 25%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grid-item image {
		width: 60rpx;
		height: 60rpx;
	}

	.grid-item text {
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>